<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stroke Master</title>
    <link rel="shortcut icon" href="/static/imgs/favicon.ico" type="image/vnd.microsoft.icon"/>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/style.css">
    <link rel="stylesheet" href="/static/css/fontawesome.min.css">
    <link rel="stylesheet" href="/static/css/font.css">
    <link rel="stylesheet" href="/static/css/jquery.mloading.css">
    <script src="/static/sweetalert/dist/sweetalert.min.js"></script>
    <style>
        .Stitle {
            font-family: Kaiti;
        }

        .Stitle2 {
            font-family: Youyuan;
            color: white;
            text-shadow: -2px 0 black,
            0 2px black,
            2px 0 black,
            0 -2px black;
        }

        .testimonial_blog:hover {
            box-shadow: 50px 50px 0 0 #4fcaff;
            transition: all 0.2s linear;
        }
    </style>
</head>
<body style="background: url('/static/imgs/BG.jpg') no-repeat;
                background-size: 100% 100%;
                background-attachment: fixed;">

<!-- 中风可视化数据预测分类 -->
<div id="wcs" class="hiw_section layout_padding">
    <div class="container">
        <div class="row">
            <div class="col-md-12 text_align_center">
                <h1 class="Stitle">☃ 中风数据分类预测工具 ☃</h1>
                <hr>
                <p>利用 “机器学习” 技术一方面能提高医师的诊断效率，有利于减轻医生的诊断压力，快速进行中风预测。</p>
                <hr>
                <br>
            </div>
            <div class="col-md-5">
            </div>
        </div>
        <div class="row">
            <div class="col-md-11">
                <div class="full testimonial_blog" style="color: white;">
                    <h3 class="Stitle2">中风数据分类预测</h3>
                    <hr>
                    <p>欢迎使用中风数据预测工具，完整填写信息即可开始预测数据</p>
                    <br>
                    <form role="form" method="post" action="." enctype="multipart/form-data">
                        {% csrf_token %}
                        <div class="box-body">
                            <div class="form-group">
                                <label for="fileinp" style="width: 100%;">
                                    <div class="input-group">
                                        <span>性别：</span>
                                        <select id="pname" name="gender" style="width: 100px;" required>
                                            <option value="">请选择</option>
                                            <option value="1">男</option>
                                            <option value="0">女</option>
                                        </select>
                                        <span style="margin-left: 50px;">年龄：</span>
                                        <input id="pname" name="age" type="number" style="width: 100px;" required
                                               min="0" placeholder="请输入">
                                        <span style="margin-left: 50px;">是否有高血压：</span>
                                        <select id="pname" name="hypertension" style="width: 100px;" required>
                                            <option value="">请选择</option>
                                            <option value="1">是</option>
                                            <option value="0">否</option>
                                        </select>
                                        <span style="margin-left: 50px;">是否有心脏病：</span>
                                        <select id="pname" name="heart_disease" style="width: 100px;" required>
                                            <option value="">请选择</option>
                                            <option value="1">是</option>
                                            <option value="0">否</option>
                                        </select>
                                    </div>
                                    <br>
                                    <div class="input-group">
                                        <span>已婚：</span>
                                        <select id="pname" name="ever_married" style="width: 100px;" required>
                                            <option value="">请选择</option>
                                            <option value="1">是</option>
                                            <option value="0">否</option>
                                        </select>
                                        <span style="margin-left: 50px;">工作：</span>
                                        <select id="pname" name="work_type" style="width: 120px;" required>
                                            <option value="">请选择</option>
                                            <option value="0">私人企业</option>
                                            <option value="1">政府工作</option>
                                            <option value="2">自由职业者</option>
                                            <option value="3">从未工作</option>
                                            <option value="4">儿童</option>
                                        </select>
                                        <span style="margin-left: 45px;">住宅类型：</span>
                                        <select id="pname" name="Residence_type" style="width: 120px;" required>
                                            <option value="">请选择</option>
                                            <option value="0">农村</option>
                                            <option value="1">城市</option>
                                        </select>
                                        <span style="margin-left: 50px;">平均血糖水平：</span>
                                        <input style="width: 100px;" id="pname" name="avg_glucose_level" type="number"
                                               min="1.00" max="500.00" step="0.01" placeholder="mg/dL" required>
                                    </div>
                                    <br>
                                    <div class="input-group" style="margin-left: 190px;">
                                        <span>体重指数 BMI：</span>
                                        <input id="pname" name="bmi" type="number" min="1.00" max="500.00" step="0.1"
                                               placeholder="kg/m²" required>
                                        <span style="margin-left: 80px;">吸烟状态：</span>
                                        <select id="pname" name="smoking_status" style="width: 120px;" required>
                                            <option value="">请选择</option>
                                            <option value="0">从不吸烟</option>
                                            <option value="2">以前吸烟</option>
                                            <option value="3">吸烟</option>
                                            <option value="1">不知道</option>
                                        </select>
                                    </div>
                                    {% if a == 1 %}
                                        <br>
                                        <p>输入信息:<br>
                                            {{ info }}
                                        </p>
                                        <hr>
                                        <p>
                                            预测结果:&nbsp;&nbsp;{{ predictions }}<br><br>&nbsp;&nbsp;用&nbsp;&nbsp;时: {{ times }}
                                            s
                                        </p>
                                    {% endif %}
                                </label>
                            </div>
                        </div>
                        <hr>
                        {% if a == 1 %}
                            <button type="submit" style="width: 50%;margin: 0 auto;margin-top: -80px;" id="btn1"
                                    onclick="error()">点击开始预测数据
                            </button>
                        {% else %}
                            <button type="submit" style="width: 50%;margin: 0 auto;" id="btn1" onclick="error()">
                                点击开始预测数据
                            </button>
                        {% endif %}
                    </form>
                    <div>
                        <span><a href="/visual/" style="text-decoration: underline">查看可视化数据</a></span>
                        <span><a href="/" style="text-decoration: underline;float: right">返回主界面</a></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 中风可视化数据预测分类 -->
<script src="/static/js/jquery-3.3.1.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/jquery.mloading.js"></script>
<script>
    function error() {
        if (document.getElementByTagName('select').value == null) {
            swal("数据未填写完整！",
                {
                    icon: "error",
                    buttons: "好的！",
                });
        } else {
            $(function () {
                $("body").mLoading();
                document.getElementById('btn1').innerHTML = '正在进行预测中...';
            });
        }
    };
</script>
<script>
    $(function () {
        'use strict';
        var winH = $(window).height();
        $('header').height(winH);
        $('header .container > div').css('top', (winH / 2) - ($('header .container > div').height() / 2));
        $('.navbar ul li a.search').on('click', function (e) {
            e.preventDefault();
        });
        $('.navbar a.search').on('click', function () {
            $('.navbar form').fadeToggle();
        });
        $('.navbar ul.navbar-nav li a').on('click', function (e) {
            var getAttr = $(this).attr('href');
            e.preventDefault();
            $('html').animate({scrollTop: $(getAttr).offset().top}, 1000);
        });
        $("#btn").click(function () {
            $("#fileinp").trigger('click');
        });
        $("#fileinp").change(function () {
            $("#text").html($("#fileinp").val());
        });

        $("#btn2").click(function () {
            $("#fileinp2").trigger('click');
        });
        $("#fileinp2").change(function () {
            $("#text2").html($("#fileinp2").val());
        });
    });
</script>
</body>
</html>